<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h2>一、如何部署</h2>
  <div>前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可</div>
  <h2>二、404问题</h2>
  <div>vue项目在本地时运行正常，但部署到服务器中，刷新页面，出现了404错误
    先定位一下，HTTP 404 错误意味着链接指向的资源不存在
    问题在于为什么不存在？且为什么只有history模式下会出现这个问题？</div>
  <br>
  <h2>为什么history模式下有问题</h2>
  <div>Vue是属于单页应用（single-page application）
    而SPA是一种网络应用程序或网站的模型，所有用户交互是通过动态重写当前页面，前面我们也看到了，不管我们应用有多少页面，构建物都只会产出一个index.html</div>
  <script>
      // 现在，我们回头来看一下我们的nginx配置
      // server {
      //   listen  80;
      //   server_name  www.xxx.com;

      //   location / {
      //     index  /data/dist/index.html;
      //   }
      // }

      // 可以根据 nginx 配置得出，当我们在地址栏输入 www.xxx.com 时，这时会打开我们 dist 目录下的 index.html 文件，然后我们在跳转路由进入到 www.xxx.com/login

      // 关键在这里，当我们在 website.com/login 页执行刷新操作，nginx location 是没有相关配置的，所以就会出现 404 的情况
  </script>
  <h4>为什么hash模式下没有问题</h4>
  <div>router hash 模式我们都知道是用符号#表示的，如 website.com/#/login, hash 的值为 #/login

    它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对服务端完全没有影响，因此改变 hash 不会重新加载页面

    hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 website.com/#/login 只有 website.com 会被包含在请求中 ，因此对于服务端来说，即使没有配置location，也不会返回404错误
  </div>
  <h2>解决方案</h2>
  <div>
    看到这里我相信大部分同学都能想到怎么解决问题了，
    <br>
    产生问题的本质是因为我们的路由是通过JS来执行视图切换的，
    <br>
    当我们进入到子路由时刷新页面，web容器没有相对应的页面此时会出现404
    <br>
    所以我们只需要配置将任意页面都重定向到 index.html，把路由交由前端处理
    <br>
    对nginx配置文件.conf修改，添加try_files $uri $uri/ /index.html;
  </div>
  <br>
  <script>
    // server {
    //   listen  80;
    //   server_name  www.xxx.com;

    //   location / {
    //     index  /data/dist/index.html;
    //     try_files $uri $uri/ /index.html;
    //   }
    // }

    // 为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面
    // const router = new VueRouter({
      //   mode: 'history',
      //   routes: [
      //     { path: '*', component: NotFoundComponent }
      //   ]
      // })
  </script>
  <div>关于后端配置方案还有：Apache、nodejs等</div>
</body>

</html>